<template>
	<view class="draft">
		<view class="total">
			<view>
				当前草稿数量：{{draftsTotal}}
			</view>
			<view
				style="color: #F56C6C;"
				@click="clickPageListButton"
				v-if="list.length">
				删除本页
			</view>
		</view>
		<template v-if="list.length">
			<view class="for" v-for="(item,index) in list">
				<text class="digit">{{index+1}}.</text>
				<text class="title" v-if="item.title || item.content">{{item.title?item.title:$_filterHtml(item.content)}}</text>
				<text class="title" v-else>空草稿</text>
				<view style="color: #409EFF;" @click="$_to('editor/editor?type=post&editType=edit&did='+item.did)">编辑</view>
				<view style="color: #F56C6C;" @click="cliclDelButton(item.did)">删除</view>
			</view>
			<view
				class="page"
				@click="clickMoreButton">
				{{listPageText}}
			</view>
		</template>
		<template v-else>
			<global-empty></global-empty>
			<view style="width: 200rpx;height: 80rpx;display: flex;align-items: center;justify-content: center;font-size: 28rpx;line-height: 28rpx;color: #FFF;background: #409EFF;margin: auto;" @click="$_to('editor/editor?type=post&editType=new')">新建草稿</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				listStatus:"loading",
				listPage:2,
				listPageText: this.$t('clickToLoadMore'),
				draftsTotal:"",
			}
		},
		onShow() {
			this.getList();
		},
		onLoad() {
			
		},
		methods: {
			getList(){
				this.$_request(
					"GET","/api/fresns/v1/editor/post/drafts",
					{},
					(res) => {
						this.list = res.data.data.list;
						this.draftsTotal = res.data.data.pagination.total;
						this.listPage = 2;
						this.listPageText = this.$t('clickToLoadMore');
					}
				)
			},
			// 点击删除
			cliclDelButton(did){
				uni.showModal({
					title: '提示',
					content: '是否删除本草稿？',
					success: (res) => {
						if (res.confirm) {
							this.$_request(
								"DELETE",`/api/fresns/v1/editor/post/draft/${did}`,
								{},
								(res) => {
									if(res.data.code == 0 ){
										this.getList();
									}else{
										uni.showToast({
											title: res.data.message,
											icon: 'none',
											duration: 1500
										});
									}
								}
							)
						}
					}
				});
			},
			// 点击翻页
			clickMoreButton(){
				if (this.listPageText == this.$t('loading')) { return }
				this.listPageText = this.$t('loading');
				this.$_request(
					"GET", "/api/fresns/v1/editor/post/drafts",
					{
						"page": this.listPage
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = this.list.concat(res.data.data.list);
							this.listPage++
							this.listPageText = this.$t('clickToLoadMore')
						} else {
							this.listPageText = this.$t('listEmpty')
						}
					}
				)
			},
			// 删除当前页
			clickPageListButton(){
				uni.showModal({
					title: '提示',
					content: '是否删除本页所有草稿？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading();
							this.delListAll();
						}
					}
				});
			},
			delListAll(){
				const deletePromises = this.list.map(item => {
					return new Promise((resolve, reject) => {
						this.$_request(
							"DELETE",
							`/api/fresns/v1/editor/post/draft/${item.did}`,
							{},
							(res) => {
								if (res.data.code === 0) {
									resolve();
								} else {
									reject(res.data.message);
								}
							},
							() => reject('网络错误') // 确保有错误处理，可选
						);
					});
				});
				
				// 使用Promise.all等待所有删除操作完成
				Promise.all(deletePromises)
					.then(() => {
						uni.hideLoading();
						this.getList();
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 1500
						});
					});
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #FFF;
}
.draft{
	padding: 0 25rpx;
	.no-draft{
		
	}
	.total{
		display: flex;
		justify-content:space-between;
		padding: 25rpx 0;
		border-bottom: 25rpx solid $background;
	}
	.for{
		display: flex;
		align-items: center;
		border-bottom: 1px solid $border;
		padding: 25rpx 0;
		.digit{
			flex-shrink: 0;
			color: $placeholder;
			padding-right: 5rpx;
		}
		.title{
			flex: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
		view{
			flex-shrink: 0;
			padding-left: 15rpx;
		}
	}
	.page{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 28rpx;
		color: $placeholder;
		padding: 25rpx 0;
	}
}
</style>
